<!--
 * @Author: your name
 * @Date: 2021-10-31 20:20:03
 * @LastEditTime: 2021-11-04 10:31:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\snake\src\components\Cell.vue
-->
<template>
  <div class="cell-box"
       :class="classes">

  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps } from 'vue'
const props = defineProps(['type'])

const classes = computed(() => {
  return {
    heed: props.type === 2,
    body: props.type === 1,
    food: props.type === -1,
  }
})
</script>
<style lang="scss" scoped>
.cell-box {
  width: 50px;
  height: 50px;
  @media screen and (max-width: 750px) {
    width: 30px;
    height: 30px;
  }
  border-radius: 8px;
  margin: 2px;
}
.heed {
  background-color: #fafafa;
  box-shadow: 0 0 10px #1e88e5, 0 0 20px #1e88e5, 0 0 40px #1e88e5;
}
.body {
  background-color: black;
  box-shadow: 0 0 5px #76ff03, 0 0 5px #76ff03, 0 0 10px #76ff03;
}
.food {
  background-color: #d500f9;
  border-radius: 50%;
  animation: shineFood 1s infinite;
}
@keyframes shineFood {
  0% {
    box-shadow: 0 0 5px #d500f9, 0 0 5px #d500f9, 0 0 5px #d500f9;
  }
  50% {
    box-shadow: 0 0 20px #d500f9, 0 0 20px #d500f9, 0 0 20px #d500f9;
  }
  100% {
    box-shadow: 0 0 5px #d500f9, 0 0 5px #d500f9, 0 0 5px #d500f9;
  }
}
</style>
